# Projeto de Interface

Dentre as preocupações para a montagem da interface do sistema, estabeleceu-se foco em questões como agilidade, acessibilidade e usabilidade. Desta forma, o projeto tem uma identidade visual projetada para funcionamento em desktops e dispositivos móveis.

## Fluxo do Usuário

O diagrama apresentado na Figura 03 mostra o fluxo de interação do usuário pelas telas do sistema. Cada uma das telas deste fluxo é detalhada na seção de Wireframes que se segue. 


<p align="center">
<img src="https://github.com/ICEI-PUC-Minas-PMV-ADS/pmv-ads-2022-1-e1-proj-web-t2-face-pet/blob/main/documentos/Fluxo_Face_Pet.jpg")
 </p>

<p align="center"> Figura 03 - Fluxo de telas do usuário. </p>

O fluxo do usuário ocorre da seguinte maneira:

1) Ao acessar o site, o usuário é direcionado para a página principal, descrita no fluxograma como "Home";
2) Em seguida, o usuário poderá acessar a ferramenta de busca através da página identificada como "pesquisa", cadastrar um novo animal localizado ou cadastrar um animal perdido;
3) A partir da página "pesquisa" o usuário poderá aplicar os filtros de busca disponíveis e visualizar o resultado da pesquisa. Em seguida, ele terá as seguintes opções: entrar em contato com o dono, deixar um comentário no site, cadastrar um animal localizado ou cadastrar um animal perdido;
4) Se o usuário desejar cadastrar um animal a partir da página "Home", ele poderá acessar Encontrei, o que fazer? ou Perdi, o que fazer?;
5) Por fim, se o usuário optar por acessar a lista completa de animais cadastrados por meio da página descrita no fluxograma como "Home" ele poderá  ver todos os animais cadastrados e entrar em contato com o dono  do animal ou deixar um comentário no site.
6) As opções de cadastro de animais, busca e acesso a Home sempre estarão disponíveis na barra superior do site.


## Wireframes

São protótipos usados em design de interface para sugerir a estrutura de um site web e seu relacionamentos entre suas páginas. Um wireframe web é uma ilustração semelhante do layout de elementos fundamentais na interface.

Conforme o fluxo de telas exposto na seção anterior, as janelas do sistemas são apresentadas em uma estrutura simples conforme mostrada na figura 03. A organização é composta por 3 blocos relevantes. 

**- Cabeçalho:** Local representado pelos elementos fixos de identidade como a logo e indice da página ou menu da aplicação.

**- Conteúdo:** Exibe o conteúdo da página aberta em questão.

**- Barra Superior:** Os elementos de navegação secundárias são exibidas pela barra superior, linkando conteudos com o menu facilitando navegação entre paginas para o usuário.

## Tela - Home-Page

 A página da Home-Page irá exibir desde anúncios de buscas até anúncios de pets encontrados baseados em ordem cronológia. Com eixo na estrutura padrão, traz conteúdo com imagens, nome do animal, opção de comentário e mais informações (onde contém o resumo do caso, opção de compartilhamento e dados para contatocom tutor). O site conterá em sua página inicial um bloco em barra com os seguintes elementos:
 
 **- Pesquisa:** Será aberto uma nova página, substituindo a atual, com informações de busca pretendida pelo usuário.
 
 **- Perdi, o que fazer?:** Leva o usuário a uma pagina com instruções do que fazer ao perder seu animal.
 
 **- Encontrei, o que fazer?:** Neste caso o usuário que encontrou o pet perdido será direcionado para realizar instruções de como anunciar o pet encontrado.
 
 <p align="center">
<img src="https://github.com/ICEI-PUC-Minas-PMV-ADS/pmv-ads-2022-1-e1-proj-web-t2-face-pet/blob/3ee3b1aa31b5cd99a7a27baf544f1df0d0905221/docs/img/PAGINA%20HOME.png")
     </p>
     
 ## Tela - Resultado de pesquisa
 
 Quando o usuário informar o que pretende na barra de pesquisa e clicar em ok, será direcionado a uma pagina que terá reunidos tudo que for associado por tags àquilo que ele informou em sua busca, como mostra a imagem a seguir. 
 
 <p align="center">
<img src="https://github.com/ICEI-PUC-Minas-PMV-ADS/pmv-ads-2022-1-e1-proj-web-t2-face-pet/blob/3ee3b1aa31b5cd99a7a27baf544f1df0d0905221/docs/img/PAGINA%20PESQUISA.png")
     </p>
 
 ## Tela - Perdi, o que fazer?
 
 A tela que irá abrir quando o usuário selecionar a opção **Perdi, o que fazer?**, terá um bloco de instruções e logo em seguida um formulário para que o tutor possa preencher com a data do desaparecimento, bem como a data de quando perdeu, dados do animal, fotos do animal e dados do tutor. 
 
  <p align="center">
<img src="https://github.com/ICEI-PUC-Minas-PMV-ADS/pmv-ads-2022-1-e1-proj-web-t2-face-pet/blob/3ee3b1aa31b5cd99a7a27baf544f1df0d0905221/docs/img/PERDI,%20O%20QUE%20FAZER_.png")
      </p>
  
  ## Tela - Encontrei, o que fazer?
  
  Esta tela será destinada para quem encontrou um animal perdido e terá os mesmos requisitos da tela anterior.
  
   <p align="center">
<img src="https://github.com/ICEI-PUC-Minas-PMV-ADS/pmv-ads-2022-1-e1-proj-web-t2-face-pet/blob/3ee3b1aa31b5cd99a7a27baf544f1df0d0905221/docs/img/ENCONTREI,%20O%20QUE%20FAZER_.png")
     </p>
 
  <p align="center">
<img src="https://github.com/ICEI-PUC-Minas-PMV-ADS/pmv-ads-2022-1-e1-proj-web-t2-face-pet/blob/3ee3b1aa31b5cd99a7a27baf544f1df0d0905221/docs/img/ENCONTREI%20O%20ANIMAL%20COMO%20EXEMPLO.png")
     </p>
   
   ## Tela - Cães
   
   Ao selecionar a opção **Cães**, o usuário será direcionado a uma pagina com diversas fotos de cães desaparecidos, podendo clicar para visualizar informações, comentar e compartilhar em redes sociais.
   <p align="center">
<img src="https://github.com/ICEI-PUC-Minas-PMV-ADS/pmv-ads-2022-1-e1-proj-web-t2-face-pet/blob/3ee3b1aa31b5cd99a7a27baf544f1df0d0905221/docs/img/TELA%20PESQUISA%20DE%20CA%CC%83ES.png")
     </p>
   
   ## Tela - Gatos
   
   Esta tela permite a visualização de apenas gatos, tendo a mesma função da tela para cães, podendo o usuário visualizar informações, comentar e compartilhar em rede social.
   
   <p align="center">
<img src="https://github.com/ICEI-PUC-Minas-PMV-ADS/pmv-ads-2022-1-e1-proj-web-t2-face-pet/blob/3ee3b1aa31b5cd99a7a27baf544f1df0d0905221/docs/img/TELA%20PESQUISA%20DE%20GATOS.png")
     </p>
    
## Tela - Comentários
    
  Na tela em que será aberta sobre o animal perdido ou encontrado, terá um quadro onde permitirá o usuário comentar sobre a questão proposta, neste quadro deve-se informar o nome de quem está comentando e o texto do comentário. Em seguida, deve-se confirmar ou cancelar o salvamento do comentário.
    
<p align="center">
<img src="https://github.com/ICEI-PUC-Minas-PMV-ADS/pmv-ads-2022-1-e1-proj-web-t2-face-pet/blob/3ee3b1aa31b5cd99a7a27baf544f1df0d0905221/docs/img/TELA%20COMENTA%CC%81RIOS.png")
     </p>